<template>
    <div class='login2'>

        <!-- <img src="../assets/login_second/bg1.png" alt="" style="opacity: 1; width: 100vw;height: 100vh;"> -->
        <img src="../assets/login_second/bg2.png" alt="">
        <div v-if="popupsFlag">
            <div class="logo">
                <img src="../assets/login_second/logo.png" alt="" class="logoimg">
            </div>
            <div class="text">
                <img src="../assets/login_second/text.png" alt="">
            </div>
            <div class="text1">
                <p>助力企业软件开发决策 共同打造大数据时代 共同打造大数据时代</p>
                <p>快速完成数据传送和接入 共同打造大数据时代</p>
            </div>
            <div class="wx" @click="wx_login">
                <div class="wxImg"></div>
                <div class="wxtext">微信登录</div>

            </div>
        </div>


        <div v-else class="ewm">
            <div class="close" @click="ewmClose">x</div>
            <div class="logo2"><img src="../assets/login_second/logo.png" alt=""></div>
            <div class="logo3"><img src="../assets/login_second/log.png" alt=""></div>
            <div class="text">微信扫描下方二维码</div>
            <div class="ewmimg">
                <img src="../assets/login_second/exm.png" alt="">
            </div>
        </div>
    </div>


</template>

<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            popupsFlag: true
        }
    },
    created() { },
    mounted() { },
    methods: {
        wx_login() {
            this.popupsFlag = false
            localStorage.setItem('token', 1)
            localStorage.setItem('keyPath', '/homepage')
            setTimeout(() => {
                if (!sessionStorage.getItem('keyPath')) {
                    this.$router.push('/homepage')
                } else {
                    this.$router.push(sessionStorage.getItem('keyPath'))
                }
            }, 500);
        },
        ewmClose() {
            this.popupsFlag = true
        }
    }
}
</script> 
<style scoped lang='scss'>
.login2 {
    width: 100vw;
    height: 100vh;
    background: url(../assets/login_second/bg1.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    // opacity: 0.1;
    // box-sizing: border-box;


    img {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.1;
    }

    .logo {
        width: 98px;
        height: 113px;
        position: absolute;
        top: 258px;
        left: 50%;
        transform: translate(-50%, -50%);

        .logoimg {
            width: 98px;
            height: 113px;
            opacity: 1;
        }
    }

    .text {
        position: absolute;
        top: 427px;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 224px;
        height: 43px;


        img {
            width: 224px;
            height: 43px;

            opacity: 1;
        }
    }

    .text1 {
        width: 100%;
        height: 18px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 200;
        color: #C6C4CB;
        opacity: 1;
        position: absolute;
        text-align: center;
        top: 525px;
    }

    .wx {
        cursor: pointer;
        width: 258px;
        height: 52px;
        border: 1px solid #20af20;
        border-radius: 26px;
        opacity: 1;
        top: 668px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        -moz-user-select: none;
        /* Firefox私有属性 */

        -webkit-user-select: none;
        /* WebKit内核私有属性 */

        -ms-user-select: none;
        /* IE私有属性(IE10及以后) */

        -khtml-user-select: none;
        /* KHTML内核私有属性 */

        -o-user-select: none;
        /* Opera私有属性 */

        user-select: none;
        /* CSS3属性 */






        &:hover {
            background-color: #20af20;

            .wxImg {
                background: url(../assets/login_second/wx2.png) no-repeat;
                background-size: 100% 100%;
            }
        }

        .wxImg {
            width: 33px;
            height: 28px;
            opacity: 1;
            position: absolute;
            left: 28%;
            background-image: url(../assets/login_second/wx.png);
            background-size: 100% 100%;

        }

        .wxtext {
            left: 43%;
            position: absolute;
        }
    }
}


.ewm {
    width: 495px;
    height: 622px;
    // border: 1px solid #637096;
    box-shadow: 0 0 10px #637096;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    opacity: 1;

    .logo2 {
        width: 50px;
        height: 59px;
        position: absolute;
        left: 50%;
        top: 59px;
        transform: translate(-50%, -50%);
        opacity: 1;

        img {
            opacity: 1;
        }
    }

    .logo3 {
        width: 118px;
        height: 22px;
        opacity: 1;
        position: absolute;
        top: 128px;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;

        img {
            opacity: 1;
        }


    }

    .text {
        width: 162px;
        height: 18px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #A4A9B9;
        opacity: 1;
        top: 231px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .ewmimg {
        width: 237px;
        height: 237px;
        top: 378px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);

        img {
            opacity: 1;
        }
    }

    .close {
        color: #fff;
        cursor: pointer;
        // opacity: 1;
        padding: 3px 5px 0 0;
    }
}
</style>

